﻿
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="author" content="patw, Patrick Wang" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script src="./js/socket.io.js" type="text/javascript"></script>    
    <script type="text/javascript" src="js/jquery.getParams.js"></script>  

    <script>
      $(document).ready(function(){
        var nodejs_server = "localhost:8081";
        var key = $.getURLParam("key");
   
        $("#keyArea").html(key);
        var socket = io.connect("http://"+nodejs_server);
        socket.emit("send", {
            key: key,
            act: "enter"
        });
        
        $("#change_btn").click(function(){
            socket.emit("send", {
                key: key,
                act: "changebg"
            });
        });
        
        $("#chatNameButton").click(function(){
            socket.emit("send", {
                key: key,
                msg: $("#chatNameText").val(), 
                act: "inputMsg"
            });
        });
 
         
      });
    </script>
    <style>
      .message
      {
        padding: 5px 5px 5px 5px;
      }
      .username
      {
        font-weight: strong;
        color: #0f0;
      }
      .msgContainerDiv
      {
        overflow-y: scroll;
        height: 250px;
      }
    </style>
  </head>
    
  <body>
 
    <div data-role="page" id="loginPage" data-role="page" data-theme="a">
        <div data-role="header">
            <h1>SocketIO Demo</h1>
        </div>
 
        <div data-role="content">
        <div data-role="fieldcontain">
            <label for="chatNameText"><strong>Message:</strong></label>
            <input type="text" name="chatNameText" id="chatNameText" value=""  />
            <button id="chatNameButton">Send Msg</button>
        </div> 
        
        <div data-role="fieldcontain">
            <button id="change_btn">Change BG Color</button>
        </div> 
        
        </div>
 
        <div data-role="footer">
           <h4 id="keyArea"></h4>
        </div>
    </div>
 
    <!--div data-role="page" id="chatPage" data-role="page" data-theme="a">
 
        <div data-role="header">
            <h1>NowJS Chat</h1>
        </div>
 
        <div data-role="content">
        <div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div>
        <label for="messageText"><strong>Message:</strong></label>
        <textarea name="messageText" id="messageText"></textarea>
 
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#loginPage" id="goBackButton" data-role="button">Go Back</a></div>
            <div class="ui-block-b"><button data-theme="a" id="chatSendButton" name="chatSendButton">Send</input>
        </fieldset>
        </div>
 
        <div data-role="footer">
            <h4>Giant Flying Saucer</h4>
        </div>
    </div-->
 
  </body>
</html>